<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8"/>
  <title>✨ 用户注册</title>
  <style>
    :root{
      --bg:#0f0f1a;
      --glass:rgba(255,255,255,.05);
      --accent:#ff3cac;
      --accent2:#784ba0;
      --accent3:#2b86c5;
    }
    html,body{
      margin:0;
      height:100%;
      background:var(--bg);
      color:#fff;
      font-family:'Segoe UI',Arial,Helvetica,sans-serif;
      overflow:hidden;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    /* 动态背景 Canvas */
    #bg-canvas{position:fixed;top:0;left:0;z-index:-1;pointer-events:none;}
    /* 音乐控制 */
    #music-btn{
      position:fixed;top:20px;right:20px;z-index:1000;
      background:var(--accent);border:none;border-radius:50%;
      width:50px;height:50px;font-size:24px;cursor:pointer;
      transition:.3s;
    }
    /* 玻璃卡片 */
    .glass{
      width:420px;
      padding:2.5rem 2.5rem 2rem;
      border-radius:1.2rem;
      background:var(--glass);
      border:1px solid rgba(255,255,255,.08);
      box-shadow:
              0 0 10px var(--accent),
              0 0 30px var(--accent2),
              0 0 60px var(--accent3);
      animation:pulse 2s infinite alternate;
    }
    @keyframes pulse{
      0%   {box-shadow:0 0 10px var(--accent),0 0 30px var(--accent2),0 0 60px var(--accent3);}
      100% {box-shadow:0 0 20px var(--accent),0 0 50px var(--accent2),0 0 80px var(--accent3);}
    }
    form table{width:100%;border-collapse:collapse;}
    th,td{padding:12px 0;text-align:center;}
    th{color:#f5f5f5;font-size:1.1rem;}
    input[type=text]{
      width:90%;padding:10px;border:none;
      border-radius:.6rem;
      background:var(--glass);
      color:#fff;font-size:1rem;
      transition:.3s;
    }
    input[type=text]:focus{outline:none;box-shadow:0 0 10px var(--accent);}
    input[type=submit],input[type=reset]{
      width:45%;margin:0 2%;padding:12px;
      border:none;border-radius:.6rem;
      background:linear-gradient(135deg,var(--accent),var(--accent2));
      color:#fff;font-size:1rem;cursor:pointer;transition:.3s;
    }
    input[type=submit]:hover,input[type=reset]:hover{transform:scale(1.05);}
  </style>
</head>
<body>
<%-- 背景音乐 --%>
<audio id="bgm" src="https://www.soundjay.com/misc/sounds/bell-ringing-05.mp3" loop muted></audio>
<button id="music-btn" onclick="toggleMusic()">🔊</button>

<%-- 动态背景 --%>
<canvas id="bg-canvas"></canvas>

<%-- 玻璃卡片表单 --%>
<div class="glass">
  <h2 style="text-align:center;margin-bottom:1.2rem;">✨ 用户注册</h2>
  <form action="/user?method=register" method="post">
    <table>
      <tr><th>用户名</th><td><input type="text" name="name" placeholder="请输入用户名"/></td></tr>
      <tr><th>密码</th><td><input type="text" name="password" placeholder="请输入密码"/></td></tr>
      <tr>
        <td colspan="2">
          <input type="submit" value="添加"/>
          <input type="reset" value="重置"/>
        </td>
      </tr>
    </table>
  </form>
</div>

<script>
  /* ---------- 动态星空背景 ---------- */
  const cvs = document.getElementById('bg-canvas');
  const ctx = cvs.getContext('2d');
  let w = cvs.width = innerWidth;
  let h = cvs.height = innerHeight;
  const particles = [], colors=['#ff4c4c','#ffcc00','#00c8ff','#7e57c2'], count=80;
  function resize(){ w = cvs.width = innerWidth; h = cvs.height = innerHeight; }
  window.addEventListener('resize', resize);
  class Particle {
    constructor(){
      this.x = Math.random()*w;
      this.y = Math.random()*h;
      this.r = Math.random()*2+1;
      this.dx = (Math.random()-0.5)*0.5;
      this.dy = (Math.random()-0.5)*0.5;
      this.color = colors[Math.floor(Math.random()*colors.length)];
    }
    update(){
      this.x+=this.dx; this.y+=this.dy;
      if(this.x<0||this.x>w) this.dx*=-1;
      if(this.y<0||this.y>h) this.dy*=-1;
    }
    draw(){
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.r, 0, Math.PI*2);
      ctx.fillStyle=this.color;
      ctx.globalAlpha=0.6;
      ctx.fill();
    }
  }
  for(let i=0;i<count;i++) particles.push(new Particle());
  function drawBg(){
    ctx.clearRect(0,0,w,h);
    particles.forEach(p=>{p.update();p.draw();});
    requestAnimationFrame(drawBg);
  }
  drawBg();

  /* ---------- 鼠标彩虹拖尾 ---------- */
  const trail=[],maxTrail=30;
  document.addEventListener('mousemove', e=>{
    trail.push({x:e.clientX,y:e.clientY,life:1});
    if(trail.length>maxTrail) trail.shift();
  });
  function drawTrail(){
    ctx.globalAlpha=0.9;
    trail.forEach((t,i)=>{
      ctx.beginPath();
      ctx.arc(t.x,t.y,10*t.life,0,Math.PI*2);
      ctx.fillStyle=`hsl(${i*15},100%,60%)`;
      ctx.fill();
      t.life-=0.04;
    });
    trail.splice(0, trail.filter(t=>t.life<=0).length);
    requestAnimationFrame(drawTrail);
  }
  drawTrail();

  /* ---------- 音乐开关 ---------- */
  function toggleMusic(){
    const bgm = document.getElementById('bgm');
    bgm.muted = !bgm.muted;
    document.getElementById('music-btn').textContent = bgm.muted ? '🔇' : '🔊';
  }
</script>
</body>
</html>